<template>
      <div>
        <div
          v-if="!route.meta?.hidden"
          class="first-level"
          :class="{ selectedBar: currentRouteId === route.name }"
          @click.stop="handleClick(route)"
        >
          <div class="routeTitle">
            <component
          class="menu-icon"
          v-if="route.meta"
          theme="outline"
          size="12"
          strokeWidth="3"
          :is="route.meta.icon"
        />
            {{ route.meta?.title || route.name }}
          </div>
          <div v-if="route.children" class="openBtn" :class="{ opened: route.opened }"></div>
        </div>
        <div v-else class="first-level undone2">
          <div class="routeTitle undone2">
            
            {{ route.meta?.title || route.name }}
          </div>
        </div>
        <template v-if="route.children && route.opened">
          <template v-for="(child,index) in route.children" :key="index">
            <Tindex :route="child" :class="'child'" />
            <!-- <div
              v-if="!child.meta?.hidden"
              class="first-level levelChild"
              :class="{ selectedBar: currentRouteId === child.name }"
              @click.stop="handleClick(child)"
             
            >
              <div class="routeTitle">
                <component
                class="menu-icon"
                v-if="child.meta"
                theme="outline"
                size="12"
                strokeWidth="3"
                :is="child.meta.icon"
              />
                {{ child.meta?.title || child.name }}
              </div>
              <div v-if="child.children" class="openBtn" :class="{ opened: child.opened }"></div>
            </div> -->
            <!-- <div v-else class="first-level levelChild undone2">
              <div class="routeTitle undone2">
                {{ child.meta?.title || child.name }}
              </div>
            </div> -->
          </template>
        </template>
      </div>
  </template>
  
  <script setup>
  import { useStore } from 'vuex';
  const store = useStore();

  defineProps({
    route: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });
  const upperElement = ref(null);
const upperWidth = computed(() => {
  if (upperElement.value) {
    console.log(upperElement.value.offsetWidth,'宽度')
    return upperElement.value.offsetWidth - 10;
  }
  return 0;
});
onMounted(() => {
    document.querySelectorAll('.child .routeTitle').forEach(function(element) {
    element.style.marginLeft  = '20px ';
});
})

  const currentRouteId = computed(() => {
      return store.getters['routes/currentRouteId'];
    });
  const routes = computed(() => {
      return store.getters['routes/api2Routes'];
    });
  // onMounted(() => {
  //   currentRouteId.value = userStore.currentMenuId
  //   setRoutes()
  //   watch(
  //     () => userStore.currentColumnId,
  //     () => {
  //       routes.value = userStore.secondMenu
  //     }
  //   )
  //   watch(
  //     () => userStore.currentMenuId,
  //     () => {
  //       currentRouteId.value = userStore.currentMenuId
  //     }
  //   )
  // })
  function camelCase(str) {
    return str.replace(/-(\w)/g, (match, p1) => p1.toUpperCase());
  }
  function convertCamelToKebab(input) {
    return input.replace(/([A-Z])/g, '-$1').toLowerCase();
  }
  
  function handleClick(route) {
    console.log(route,'点击了')
    store.commit('routes/setCurrentRouteId', route.name)
    if (route.children) {
      if (!route.opened) route.opened = true
      else {
        route.opened = !route.opened
      }
      return
    }
  
    // if (route.menuId === userStore.currentMenuId) {
    //   console.log('当前路由一样')
    //   return
    // }
    // if (router.hasRoute(formRouterName)) {
    //   userStore.setCurrentMenuId(route.menuId)
    //   router.push({
    //     name: formRouterName,
    //   })
    //   appStore.closeDrawerBar()
    // } else {
    //   console.log('没有当前路由======')
    // }
  }
  
  </script>
  
  <style lang="scss" scoped>
//   .child{
//     .routeTitle{
//       margin-left: 20px !important;
//     }
//   }
  .wrapper {
    width: 156px;
    padding: 8px;
    height: 100vh;
    // height: calc(100vh - 64px);
    background-color: #fff;
    border-right: 1px solid #dddddd;
  
    #title {
      height: 44px;
      padding-left: 19px;
      font-size: 16px;
      font-weight: bold;
      color: #000000;
      line-height: 44px;
    }
  
    .first-level {
      display: flex;
      position: relative;
      align-items: center;
      width: 164px;
      height: 40px;
      font-size: 14px;
      font-weight: 400;
      color: #222222;
      border-radius: 4px;
      cursor: pointer;
  
      .routeTitle {
        margin-left: 10px;
        font-size: 12px;
        font-weight: 400;
        // color: #000000;
      }
  
      .openBtn {
        position: absolute;
        right: 20px;
        width: 6px;
        height: 6px;
        border-radius: 1px;
        border-bottom: 1px solid #222;
        border-right: 1px solid #222;
        transform: rotate(-45deg);
        transition: transform 0.2s;
      }
  
      .opened {
        transform: rotate(45deg);
      }
    }
  
    .selectedBar {
      background: #f2f5ff;
      color: #7ea7ff !important;
    }
  
    .split {
      width: 156px;
      height: 32px;
      font-size: 10px;
      font-weight: 400;
      color: #999999;
      padding-left: 6px;
      line-height: 32px;
    }
  
    .first-level:hover {
      background: #f2f5ff;
      
    }
  
    .levelChild {
      padding-left: 10px;
      width: 154px !important;
    }
  }
  </style>
  